<template>
  <a-modal
    :visible="show"
    width="80vw"
    height="90vh"
    :bodyStyle="{ padding: '10px' }"
    title="编辑报工任务"
    @ok="handleOk"
    @cancel="handleCancel"
    :maskClosable="false"
  >
    <div class="page-main1">
      <div class="container">
        <div class="content">
          <a-form-model ref="ruleForm">
            <section>
              <div class="section-header">报工单信息</div>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item label="报工单编号：">
                    <a-input
                      disabled
                      :value="
                        project.busKey && project.itemCount
                          ? project.busKey + '(' + (task.itemIndex) + '/' + (project.itemCount) + ')'
                          : ''
                      "
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="报工类别：">
                    <a-select disabled default-value="0" style="width: 100%">
                      <a-select-option v-for="(code, index) in codes.WorkReportType" :key="index" :value="code.code">
                        {{ code.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="报工状态：">
                    <a-select disabled v-model="task.status">
                      <a-select-option
                        v-for="(code, index) in codes.WorkReportTaskStatus"
                        :value="code.code"
                        :key="index"
                      >
                        {{ code.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item label="合同编号：">
                    <a-input disabled v-model="project.contractNumber" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="16">
                  <a-form-model-item label="合同名称：">
                    <a-input disabled v-model="project.contractName" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item label="项目负责人：">
                    <UserInputSelector
                      :username.sync="task.handlerUserId"
                      :realname.sync="task.handlerUser"
                      multiple="multiple"
                      placeholder="请选择"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="16">
                  <a-form-model-item label="供应商名称">
                    <a-input disabled v-model="project.supplierName" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item label="合同金额：">
                    <a-input disabled v-model="project.amount" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="16">
                  <a-form-model-item ref="nodeContent" label="工期节点内容：" prop="nodeContent">
                    <a-input v-model="task.nodeContent" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item label="关联节点金额：">
                    <a-input v-model="task.paymentAmount" />
                  </a-form-model-item>
                </a-col>

                <a-col :span="16">
                  <a-form-model-item label="付款节点内容：" prop="paymentContent">
                    <a-input v-model="task.paymentContent" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item label="PO单行号：">
                    <a-input
                      v-model="task.poLine"
                      :suffix="'共' + (project.poLineCount ? project.poLineCount : '0') + '行'"
                    />
                  </a-form-model-item>
                </a-col>

                <a-col :span="8">
                  <a-form-model-item label="费用支出号">
                    <a-input placeholder="自动带入" v-model="task.costNumber" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="提交资料内容：">
                    <a-input v-model="task.submitResource" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item label="合同约定日期：">
                    <a-date-picker style="width: 100%" valueFormat="YYYY-MM-DD" v-model="task.complateTime" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="报工节点标志：">
                    <div style="display: flex; justify-content: space-around">
                      <a-select v-model="task.nodeIdentify" style="width: 100%">
                        <a-select-option v-for="(code, index) in contractNodeOptions" :key="index" :value="code">
                          {{ code }}
                        </a-select-option>
                      </a-select>
                      <div style="display: flex; width: 20vw; justify-content: flex-end">
                        <span style="min-width: 60px; text-align: right; padding-right: 5px; line-height: 40px"
                          >税率:</span
                        >
                        <a-input placeholder="" v-model="task.taxRate" :suffix="'%'" />
                      </div>
                    </div>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="付款节点标志：">
                    <div style="display: flex; justify-content: space-around">
                      <a-select v-model="task.isPayNode" style="width: 100%">
                        <a-select-option v-for="(code, index) in yesOrNo" :key="index" :value="code.code">
                          {{ code.name }}
                        </a-select-option>
                      </a-select>
                      <div style="display: flex; width: 60vw; justify-content: flex-end">
                        <span style="min-width: 110px; text-align: right; padding-right: 5px; line-height: 40px"
                          >多个付款条件:</span
                        >
                        <a-select v-model="task.isMutiContiditon" style="width: 100%">
                          <a-select-option v-for="(code, index) in yesOrNo" :key="index" :value="code.code">
                            {{ code.name }}
                          </a-select-option>
                        </a-select>
                      </div>
                    </div>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </section>
            <ResultABox :task.sync="editTask" ref="resultABoxRef" />
            <ResultBBox :task.sync="editTask" ref="resultBBoxRef" />
          </a-form-model>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script>
import { getAction, postAction } from '@/api/manage'
import cloneDeep from 'lodash/cloneDeep'
export default {
  components: {
    ResultABox: () => import('@/views/workReport/task/ResultAAdd'),
    ResultBBox: () => import('@/views/workReport/task/ResultBAdd'),
    UserSelector: () => import('@/views/workReport/role/UserSelector'),
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    project: {
      type: Object,
      default: () => {
        return {}
      },
    },
    task: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      editTask: {},
      result: {},
      codes: {},
      urls: {
        codes: '/manage/codeInfo/queryByTypes',
        psCodes: '/hte/contract/codes',
        personList: '/person/info/personList',
      },
      yesOrNo: [
        { code: '1', name: '是' },
        { code: '0', name: '否' },
      ],
      showUserSelector: false,
      contractNodeOptions: ['到货', '安装', '验收', '质保'],
      permission: [],
      personMap: [],
      existPersonMap: [],
      personList: [],
      result0: {},
      result1: {},
      selectUserKeyWord: null,
      selectUserTimeOut: null,
    }
  },
  mounted() {
    this.fetchCodes()
    this.fetchPsCodes()
  },
  methods: {
    fetchPermission() {
      getAction(this.urls.myPermission, { projectId: this.editTask.projectId }).then((res) => {
        if (res.success) {
          this.permission = res.result
        }
      })
    },
    checkPermission(powers) {
      let hasPower = true
      // for (let p of powers) {
      //   if (this.permission.indexOf(p) > -1) {
      //     hasPower = true
      //     break
      //   }
      // }
      return hasPower
    },
    fetchPsCodes() {
      postAction(this.urls.psCodes, { codes: ['contract_status'] }).then((res) => {
        if (res.success) {
          this.codes = { ...this.codes, ...res.result }
        }
      })
    },
    fetchCodes() {
      getAction(this.urls.codes, { types: 'WorkReportTaskStatus,WorkReportType,WorkReportTaskPaymentStatus' }).then(
        (res) => {
          if (res.success) {
            this.codes = { ...this.codes, ...res.result }
          }
        }
      )
    },
    handleOk() {
      this.editTask = cloneDeep(this.task)
      this.$set(this.editTask, 'partaAttachs',this.$refs.resultABoxRef.getAttachs())
      this.$set(this.editTask, 'partbAttachs', this.$refs.resultBBoxRef.getAttachs())
      this.$emit('close', this.editTask)
    },
    handleCancel() {
      this.$emit('close')
    },
    openUserSelector() {
      this.showUserSelector = true
    },
    selectUser(selection) {
      if (selection.length > 0) {
        this.$set(this.editTask, 'handlerUserId', selection[0].username.trim())
        this.$set(this.editTask, 'handlerUser', selection[0].realname.trim())
      }
      this.showUserSelector = false
    },
    calcTaskStatus(resultA, resultB) {
      let taskResultMap = {}
      taskResultMap['0000'] = '0' //甲未报工，乙未报工
      taskResultMap['0010'] = '1' //甲未报工，乙报完成
      taskResultMap['0011'] = '2' //甲未报工，乙报合格
      taskResultMap['1000'] = '3' //甲报完成，乙未报工
      taskResultMap['1010'] = '4' //甲报完成，乙报完成
      taskResultMap['1011'] = '5' //甲报完成，乙报合格
      taskResultMap['1100'] = '6' //甲报合格，已未报工
      taskResultMap['1110'] = '7' //甲报合格，乙报完成
      taskResultMap['1111'] = '8' //甲报合格，乙报合格
      let resultMap = {}
      resultMap['质量不合格'] = '10'
      resultMap['质量合格'] = '11'
      let prefix = '00'
      let suffix = '00'
      if (resultMap[resultA]) {
        prefix = resultMap[resultA]
      }
      if (resultMap[resultB]) {
        suffix = resultMap[resultB]
      }
      let key = prefix + suffix
      let taskStatus = taskResultMap[key]
      return taskStatus
    },
  },
  watch: {
    show(newV, oldV) {
      if (newV) {
        this.editTask = Object.assign({}, this.task)
        this.partaAttachs = this.editTask.partaAttachs
        this.partbAttachs = this.editTask.partabttachs
        setTimeout(() => {
        }, 1)
      }
    },
    editTask: {
      handler(newV, oldV) {
        this.$set(this.editTask, 'status', this.calcTaskStatus(this.editTask.partaResult, this.editTask.partbResult))
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main1 {
  .container {
    padding: 0px !important;
    max-height: 70vh;
    overflow: auto;
    .content {
      margin-top: 20px;
      section {
        margin-bottom: 18px;
        .section-table {
          .add-btn {
            margin-left: 0;
            margin-bottom: 10px;
          }
          /deep/ .a-upload__input {
            display: none !important;
          }
        }
      }
    }
  }
  .tips-box {
    margin-top: 32px;
    .add-btn {
      width: 180px;
      height: 40px;
      line-height: 40px;
      background-color: #4095e4;
      border-radius: 2px;
    }
  }
}
/deep/ .el-upload__input {
  display: none !important;
}
</style>
